<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />
    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
    <div class="tool-box">
      <a class="playtool" :class="{playing}" @click="togglePlay" :title="playing ? '暂停' : '播放'">
        <PlayCircleOutlined v-if="!playing" />
        <PauseCircleOutlined v-if="playing" />
      </a>
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="terrainExaggeration" :max="2" /></div> -->
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="relativeHeight" :max="10000" /></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="layerOptions" /></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="entityToolbarOptions" /></div>
        <div class="select-box-wrapper"><select-box :options="sizeOptions" /></div>
        <div class="select-box-wrapper"><a-checkbox v-model:checked="softShadows">soft shadows</a-checkbox></div>
        <div class="select-box-wrapper"><a-checkbox v-model:checked="terrainShadows">terrain shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="picking">选择</a-checkbox></div> -->
      <div id="menu">
        <!-- <p><button @click="onClick('play')">播放</button></p> -->
        <!-- <p><button @click="onClick('stop')">暂停</button></p> -->
      </div>
    </div>
  </div>
</template>

<script>

import { PlayCircleOutlined, PauseCircleOutlined, PlayCircleFilled, PauseCircleFilled } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import SelectBox from '@components/widgets/select-box';
import { G3V,MousePosition,g3a_odlines } from '@lib/g3x';

export default defineComponent({
  name: 'airlines', // 航线
  components: { PlayCircleOutlined, PauseCircleOutlined, PlayCircleFilled, PauseCircleFilled, SelectBox },
  setup() {
    return {
      viewer: null,
      onshadows: () => {},
      isRepeating: true,
      videoOverlay: true
    };
  },
  data() {
    return {
      playing: true,
      g3v: null,
      _odlines: undefined,
      layerOptions: [],
      shadows: true,
      nowPostion: {}
    };
  },
  computed: {},
  watch: {
    shadows(val) {
      this.onshadows(val);
    }
  },
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.g3v) {
      this.g3v.destroy();
      this.g3v = null;
    }
  },
  methods: {
    togglePlay() {
      this.playing = !this.playing;
      let { rotater } = this;
      if (this.playing) {
        // rotater.start();
      } else {
        // rotater.stop();
      }
    },
    initViewer() {
      let vm = this;
      Cesium.Ion.defaultAccessToken = $accessToken.default;

      const czmOptions = {
        imageryProvider: { type: 'arcgisImagery', options: { brightness: 0.1, show: true } },
        shadows: true
      };
      const g3vOptions = {
        navigation: {
          defaultResetView: G3V.defaultViews.china.mainland.rectangle
        },
        depthTestAgainstTerrain: false,
        hideLayers: false,
        addImageLayers: [{ type: 'tdtIboMap', options: { brightness: 0.1, show: true } }, { type: 'tdtImgAnno', options: { brightness: 0.1, show: true } }]
      };

      this.g3v = new G3V();
      var viewer = this.g3v.create('cesium-drawer', czmOptions, g3vOptions);

      this.viewer = viewer;
      this.onViewerInited(viewer);

      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromRadians(2.0298074880350025, 0.34841324438878757, 2513897.4758352037),
        orientation: {
          heading: Cesium.Math.toRadians(175.0),
          pitch: Cesium.Math.toRadians(-35.0),
          roll: 0.0
        },
        orientation: {
          heading: 6.111857745206341,
          pitch: -1.1011764373040385,
          roll: 0.0030322475367121626
        }
      });

      this.initEffects();
    },
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
    },
    initEffects() {
      let vm = this;
      const viewer = this.viewer;
      var scene = viewer.scene;

      function loadData(dataFunc) {
        Cesium.Resource.fetchJson('//zzgis.com/cdn/3d/SampleData/earthSDK/odlines/flights.json').then(function(data) {
          //var timeDuration = 5.0;
          //var moveBaseDuration = 0.5;
          var timeDuration = 10.0;
          var moveBaseDuration = 4.0;

          var airports = data.airports.map(function(item) {
            return {
              coord: [item[3], item[4]]
            };
          });

          function getAirportCoord(idx) {
            return [data.airports[idx][3], data.airports[idx][4]];
          }

          // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
          var routesGroupByAirline = {};
          data.routes.forEach(function(route) {
            var airline = data.airlines[route[0]];
            var airlineName = airline[0];
            if (!routesGroupByAirline[airlineName]) {
              routesGroupByAirline[airlineName] = [];
            }
            routesGroupByAirline[airlineName].push(route);
          });

          var pointsData = [];
          data.routes.forEach(function(airline) {
            pointsData.push(getAirportCoord(airline[1]));
            pointsData.push(getAirportCoord(airline[2]));
          });

          var routes = routesGroupByAirline['Air China'];
          // routes.length = 1;
          console.log('ddd' + routes.length);

          var timeDuration = 10.0;
          var moveBaseDuration = 4.0;

          var routePaths = [];
          routes.forEach(function(route, index) {
            routePaths.push({
              startPos: airports[route[1]].coord.map(e => (e * Math.PI) / 180.0),
              endPos: airports[route[2]].coord.map(e => (e * Math.PI) / 180.0),
              heightRatio: 10.0, // 曲率，默认为1.0， 越大抬高越多
              width: 1.0,
              color: [0.8 * Math.random() + 0.2, 0.5 * Math.random() + 0.5, 0.1, 1.0],
              bgColor: [0.8, 0.8, 0.1, 0.2],
              bidirectional: 2,
              startTime: timeDuration * Math.random(),
              duration: moveBaseDuration + 1.0 * Math.random()
            });
          });

          dataFunc(routePaths, timeDuration);
        });
      }

      const _odlines = new g3a_odlines(viewer);
      loadData((data, timeDuration) => {
        _odlines.timeDuration = timeDuration;
        _odlines.color = [1, 1, 0, 1];
        _odlines.playing = true;
        _odlines.data = data;
      });
      this._odlines = _odlines;
    }
  }
});
</script>

<style lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .cesium-viewer-bottom {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }

  .playtool {
    position: absolute;
    top: 57px;
    left: 7px;
    font-size: 1.5em;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.7;
    transition: all 500ms;

    &.playing{
      background-color: rgba(0, 0, 200, 1);
    }

    &:hover {
      opacity: 0.9;
    }
  }
}

.tool-box {
  position: absolute;
  top: 70px;
  left: 10px;
  z-index: 9;

  #menu {
    padding-top: 20px;
    button {
      background-color: rgba(0, 0, 0, 0.75);
      border-color: rgba(0, 0, 0, 0);
      cursor: pointer;
      transition: all 500ms;
      &:hover {
        opacity: 0.75;
      }
    }
  }

  .slider-box-wrapper {
    width: 18em;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, 0.75);
    margin-bottom: 10px;
  }

  .select-box-wrapper {
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.75);
    margin-bottom: 10px;
    width: auto;
  }
}
</style>
